.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: calc(var(--z-index-overlay) + 1);
  width: 100%;
  max-width: 28rem;
  padding: 0;
  transform: translate(-50%, -50%);
  animation: fadeIn var(--default-animation-duration)
    var(--default-timing-function);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.dialogContent {
  color: var(--global-foreground);
  background-color: var(--global-background);
  border-radius: var(--border-radius-lg);
}

.dialogHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-5) var(--spacing-6);
  border-bottom: var(--border-width-base) solid var(--global-border);
}

.dialogTitle {
  margin: 0;
  font-size: var(--font-size-6);
  font-weight: 600;
  color: var(--global-foreground);
}

.closeButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--global-mute-text);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--border-radius-sm);
  transition: background-color var(--default-hover-animation-duration);
}

.closeButton:hover {
  color: var(--global-foreground);
  background-color: var(--global-muted-background);
}

.closeButton:focus-visible {
  outline: 2px solid var(--primary-accent);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
  box-shadow: 0px 0px 60px 8px var(--primary-overlay-40);
}

.shareContent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-6);
}

.accessSection {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  min-height: 5rem;
}

.visibilitySection {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.sectionTitle {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
  margin: 0;
  font-size: var(--font-size-4);
  font-weight: 500;
  color: var(--global-body-text);
}

.userInfo {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
}

.accessIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--overlay-50);
  background-color: var(--overlay-5);
  border-radius: 50%;
  transition: opacity 0.3s ease-in-out;
}

.userDetails {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-height: 2.75rem;
}

.userName {
  margin-bottom: var(--spacing-1);
  font-size: var(--font-size-4);
  font-weight: 500;
  color: var(--global-foreground);
  transition: opacity 0.2s ease-in-out;
}

.userEmail {
  font-size: var(--font-size-2);
  color: var(--global-mute-text);
  transition: opacity 0.2s ease-in-out;
}

.visibilityControls {
  display: flex;
  gap: var(--spacing-2);
}

.selectWrapper {
  position: relative;
  flex: 1;
}

.visibilityDropdown {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 2.5rem;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-4);
  line-height: 1;
  color: var(--global-foreground);
  cursor: pointer;
  background-color: var(--global-background);
  border: var(--border-width-base) solid var(--pane-border);
  border-radius: var(--border-radius-base);
  transition: all 0.2s;
}

.visibilityDropdown:hover:not(:disabled) {
  background-color: var(--dropdown-background-hover);
  border-color: var(--pane-border);
}

.visibilityDropdown:focus-visible {
  outline: 2px solid var(--primary-accent);
  outline-offset: 2px;
  box-shadow: 0px 0px 60px 8px var(--primary-overlay-40);
}

.visibilityDropdown:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.dropdownValue {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
}

.dropdownValue > svg:first-child {
  color: var(--overlay-50);
}

.dropdownIcon {
  opacity: 0.7;
  transition: transform 0.2s;
}

.visibilityDropdown[data-state='open'] {
  border-color: var(--dropdown-border);
}

.visibilityDropdown[data-state='open'] .dropdownIcon {
  transform: rotate(180deg);
}

.dropdownContent {
  z-index: calc(var(--z-index-overlay) + 2);
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  width: var(--radix-dropdown-menu-trigger-width);
  padding: var(--spacing-1);
  margin-top: var(--spacing-1);
  background-color: var(--global-background);
  border: var(--border-width-base) solid var(--dropdown-border);
  border-radius: var(--border-radius-base);
  box-shadow: 0 4px 20px 0 rgb(0 0 0 / 40%);
}

.dropdownItem {
  position: relative;
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-4);
  color: var(--global-foreground);
  text-align: left;
  cursor: pointer;
  border-radius: var(--border-radius-base);
  transition: background-color 0.2s;
}

.dropdownItem > svg:first-child {
  color: var(--overlay-50);
}

.dropdownItem[data-selected='true'] {
  background-color: var(--dropdown-background-active);
}

.dropdownItem:hover {
  background-color: var(--dropdown-background-hover);
}

.dropdownItem:focus-visible {
  outline: 2px solid var(--primary-accent);
  outline-offset: -2px;
  background-color: var(--dropdown-background-hover);
  box-shadow: inset 0 0 0 1px var(--primary-accent);
}

.checkIcon {
  margin-left: auto;
  color: var(--primary-accent);
}

.copyButton {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
  height: 2.5rem;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-4);
  color: var(--global-foreground);
  white-space: nowrap;
  cursor: pointer;
  background-color: var(--global-muted-background);
  border: var(--border-width-base) solid var(--global-border);
  border-radius: var(--border-radius-base);
  transition: all var(--default-hover-animation-duration);
}

.copyButton > svg {
  color: var(--overlay-50);
}

.copyButton:hover:not(:disabled) {
  background-color: var(--dropdown-background-hover);
  border-color: var(--dropdown-border);
}

.copyButton:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.visibilityDescription {
  min-height: 1rem;
  margin: 0;
  font-size: var(--font-size-2);
  color: var(--global-mute-text);
  transition: opacity 0.2s ease-in-out;
}
